import React from 'react';
import classify from '../../assets/css/goods/classify.module.css'
import {localParam} from '../../components/common/function'

export default class ClassifyComponent extends React.Component{
    constructor(){
        super();
        this.state={
            texList:[],
            texOneList:[],
            show:true,
            id:'',
            index:0
        }
    }
    goBack(){
        this.props.history.push('/')
    }
    search(){
        this.props.history.push('/common/search')
    }
    componentWillMount() {
        this.getData()
    }

    getData(){
        fetch('http://vueshop.glbuys.com/api/home/category/menu?token=1ec949a15fb709370f ')
            .then((res)=>{
                return res.json()
            }).then(res=>{
                if (res.code === 200) {
                    this.setState({texList:res.data})
                }
        });
        let id = decodeURIComponent(localParam(this.props.location.search).search.id);
        if (id !== 'undefined'){
            this.setState({index:id})
        }
        fetch('http://vueshop.glbuys.com/api/home/category/show?cid='+id+'&token=1ec949a15fb709370f')
            .then((res)=>{
                return res.json()
            }).then(res=>{
                if (res.code === 200){
                    this.setState({texOneList:res.data});
                    this.setState({show:true});
                }else {
                    this.setState({show:false});
                }
        });
    }
    classify(index,path,id){
        this.props.history.push(path);
        this.setState({index:index},()=>{
            this.getData()
        });
        this.setState({id:id})
    }
    det(path){
        this.props.history.replace(path)
    }

    render() {
        return(
            <div className={classify.boxClassify}>
                <div className={classify.boxNav}>
                    <img src={require("../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                    <span onClick={this.search.bind(this)}>&nbsp;&nbsp;&nbsp;请输入宝贝名称</span>
                </div>
                <div className={classify.boxDiv}>
                    <ul>
                        {this.state.texList.map((item,index)=>{
                            return(
                                <li className={this.state.index===item.cid?classify.active:''} key={index} onClick={this.classify.bind(this,index,'/goods/classify?id='+item.cid,item.cid)}>
                                    {item.title}
                                </li>
                            )
                        })}
                    </ul>
                    <div className={this.state.show?classify.show:classify.hide}>
                        {this.state.texOneList.map((item,index)=>{
                            return(
                                <div key={index}>
                                    <h4>{item.title}</h4>
                                    <div className={classify.boxDivOne}>
                                        {
                                            item.goods!=null?
                                                item.goods.map((item,index)=>{
                                                return(
                                                    <p key={index} className={classify.boxP} onClick={this.det.bind(this,'/goods/details/item?gid='+item.gid)}>
                                                        <img src={item.image} alt=''/>
                                                        <span>{item.title}</span>
                                                    </p>
                                                )
                                            }):""
                                        }
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                    <div className={!this.state.show?classify.show:classify.hide}>没有相关商品！</div>
                </div>
            </div>
        )
    }
}